<template>
  <div class="home_wrap">
    <h1>云胡代办事项</h1>
    <div >
      <div class="todolist">
        <!-- 待办事项的子组件 -->
         <div>
           <todoList ref="todoRef"></todoList>
         </div>
         <!-- 已完成的列表 -->
        <div>
            <doneList></doneList>
        </div>
      
      </div>
      <div class="add_wrap">
        <input type="text" v-model="txt" placeholder="请输入待办事项">
        <div class="addBtn" @click="toAdd">添加</div>
      </div>
    </div>
  </div>
</template>
<script setup> 
 import todoList from './child/todolist.vue'
 import doneList from './child/doneList.vue'
 import {ref} from 'vue'
   let txt=ref('') //获取任务输入框的值
   let todoRef=ref(null)//获取子组件用的ref
    let toAdd=()=>{
      // 获取输入框的值
      // 准备一个item数据
      let item={
        id:Date.now(),//唯一标识 时间戳
        title:txt.value,//任务内容
        isDone:false//任务是否完成
      }
      // 调用子组件的添加方法
      todoRef.value.addTodo(item)
      // 完成添加操作 清空输入框
      txt.value=''
    }
</script>
<style lang="scss">
    .home_wrap{
      width: 1000px;
      margin: 20px auto;
    }
    .add_wrap{
      height: 60px;
      display: flex;
      align-items: center;
       margin-top: 10px;
      input{
        width: 300px;
        height: 40px;
        border: 1px solid #409dfe;
      
      }
      .addBtn{
        width: 100px;
        height: 45px;
        background-color: #409dfe;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }

    }
    .todolist{
      display: flex;
    }
</style>